<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <Row class="margin-top-10">
                        <Form ref="formSearch" :model="formSearch" inline>
                            <FormItem>
                                <Select v-model="formSearch.web_category_id" style="width: 150px" placeholder="请选择分类" clearable>
                                    <Option v-for="item in cates" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem>
                                <Input v-model="formSearch.name" placeholder="名称"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formSearch')">搜索</Button>
                            </FormItem>
                        </Form>
                    </Row>
                    <Row class="margin-top-10">
                        <Button type="success" @click="modal = true" icon="plus-round">添加</Button>
                    </Row>
                    <Row class="margin-top-10">
                        <Table border :loading="loading" :columns="columns" :data="data"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="page.total" :page-size="page.page_size" size="small" @on-change="pageOnChange" show-elevator show-total></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modal" title="添加网站" :loading="modal_loading" @on-ok="modal_ok" ref="modal_add" @keydown.enter.native="modal_ok">
            <Form :model="formItem" :label-width="50">
                <FormItem label="分类">
                    <Select v-model="formItem.web_category_id">
                        <Option v-for="item in cates" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="标签">
                    <Select v-model="formItem.tag">
                        <Option v-for="item in tags" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="名称">
                    <Input v-model="formItem.name"></Input>
                </FormItem>
                <FormItem label="价格">
                    <Input v-model="formItem.price"></Input>
                </FormItem>
                <FormItem label="图片">
                    <Upload :action="uploadUrl" :headers="uploadHeaders" :on-success="uploadSuccess1">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                    </Upload>
                </FormItem>
                <FormItem label="PC">
                    <Input v-model="formItem.pc"></Input>
                </FormItem>
                <FormItem label="移动端">
                    <Upload :action="uploadUrl" :headers="uploadHeaders" :on-success="uploadSuccess2">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                    </Upload>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="modal_edit" title="编辑网站" :loading="modal_edit_loading" @on-ok="modal_edit_ok" ref="modal_edit">
            <Form :model="formItem_edit" :label-width="50">
                <FormItem label="分类">
                    <Select v-model="formItem_edit.web_category_id" :label="formItem_edit.web_category_name">
                        <Option v-for="item in cates" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="标签">
                    <Select v-model="formItem_edit.tag" :label="formItem_edit.tag">
                        <Option v-for="item in tags" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="名称">
                    <Input v-model="formItem_edit.name"></Input>
                </FormItem>
                <FormItem label="价格">
                    <Input v-model="formItem_edit.price"></Input>
                </FormItem>
                <FormItem label="图片">
                    <Upload :action="uploadUrl" :headers="uploadHeaders" :on-success="uploadSuccess3">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                    </Upload>
                </FormItem>
                <FormItem label="PC">
                    <Input v-model="formItem_edit.pc"></Input>
                </FormItem>
                <FormItem label="移动端">
                    <Upload :action="uploadUrl" :headers="uploadHeaders" :on-success="uploadSuccess4">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                    </Upload>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import '../../../styles/common.less';
    import '../../../styles/table.less';
    import {GET_OK, POST_OK, PUT_OK, DELETE_OK, PAGE_SIZE, uploadUrl, IMGURL} from '@/libs/config';
    import parseUrl from '@/libs/parseUrl';
    import Cookies from 'js-cookie';

    const TAG = ['PC展示', 'PC+移动展示', '电商平台'];
    export default {
        name: 'admin-web-web',
        data () {
            return {
                uploadUrl: uploadUrl,
                modal: false,
                modal_edit: false,
                query: '',
                loading: true,
                modal_loading: true,
                modal_edit_loading: true,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        key: 'id',
                        align: 'center'
                    },
                    {
                        title: '分类',
                        key: 'web_category_name',
                        align: 'center'
                    },
                    {
                        title: '标签',
                        key: 'tag',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', TAG[params.row.tag]);
                        }
                    },
                    {
                        title: '价格',
                        key: 'price',
                        align: 'center'
                    },
                    {
                        title: '图片',
                        key: 'img_url',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: IMGURL + params.row.img_url
                                    },
                                    style: {
                                        width: '100%'
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        title: 'PC端',
                        key: 'pc',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    attrs: {
                                        href: params.row.pc,
                                        target: '_blank'
                                    }
                                }, params.row.pc)
                            ]);
                        }
                    },
                    {
                        title: '移动端',
                        key: 'mobile',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: IMGURL + params.row.mobile
                                    },
                                    style: {
                                        width: '100%'
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push(`/admin-web/admin-web-gallery/${params.row.id}`);
                                        }
                                    }
                                }, '相册'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.getRowData(params.index);
                                            this.modal_edit = true;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '确定删除该信息？',
                                                onOk: () => {
                                                    this.delRowData(params.row.id);
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                cates: [],
                tags: [
                    {id: 0, name: 'PC展示'},
                    {id: 1, name: 'PC+移动展示'},
                    {id: 2, name: '电商平台'}
                ],
                page: {
                    total: 0,
                    page_size: PAGE_SIZE,
                    currentPage: 1
                },
                formItem: {
                    name: '',
                    web_category_id: '',
                    price: '',
                    img_url: '',
                    pc: '',
                    mobile: '',
                    tag: ''
                },
                formItem_edit: {
                    id: '',
                    name: '',
                    web_category_id: '',
                    price: '',
                    img_url: '',
                    pc: '',
                    mobile: '',
                    tag: ''
                },
                formSearch: {
                    name: '',
                    web_category_id: ''
                }
            };
        },
        mounted () {
            this.getColumnsData();
            this.getCatesData();
        },
        methods: {
            getColumnsData (page) {
                this.loading = true;
                let query = this.query;
                let url = parseUrl.parse('web', page, query);
                this.$http.get(url).then(res => {
                    if (res.data.code === GET_OK) {
                        this.data = res.data.data;
                        this.page.total = res.data.meta.total;
                    }
                }).catch().finally(() => {
                    this.loading = false;
                });
            },
            getCatesData () {
                let url = '/web-category?all=all';
                this.$http.get(url).then(res => {
                    if (res.data.code === GET_OK) {
                        this.cates = res.data.data;
                    }
                }).catch().finally();
            },
            getRowData (index) {
                let rowData = this.data[index];
                this.formItem_edit.id = rowData.id;
                this.formItem_edit.name = rowData.name;
                this.formItem_edit.web_category_id = rowData.web_category_id;
                this.formItem_edit.web_category_name = rowData.web_category_name;
                this.formItem_edit.price = rowData.price;
                this.formItem_edit.img_url = rowData.img_url;
                this.formItem_edit.pc = rowData.pc;
                this.formItem_edit.mobile = rowData.mobile;
                this.formItem_edit.tag = rowData.tag;
            },
            delRowData (id) {
                let url = `/web/${id}`;
                this.$http.delete(url).then(res => {
                    if (res.data.code === DELETE_OK) {
                        this.$Notice.success({
                            title: '删除成功'
                        });
                        this.getColumnsData();
                    }
                });
            },
            modal_ok () {
                let formData = {
                    name: this.formItem.name,
                    web_category_id: this.formItem.web_category_id,
                    price: this.formItem.price,
                    img_url: this.formItem.img_url,
                    pc: this.formItem.pc,
                    mobile: this.formItem.mobile,
                    tag: this.formItem.tag
                };
                this.$http.post('/web', formData).then(res => {
                    if (res.data.code === POST_OK) {
                        this.getColumnsData();
                        this.$Notice.success({
                            title: '创建成功'
                        });
                        this.modal_loading = false;
                    }
                    this.$nextTick(() => {
                        this.modal = false;
                        this.modal_loading = true;
                    });
                }).catch().finally();
            },
            modal_edit_ok () {
                let formEditData = this.formItem_edit;
                let url = `/web/${formEditData.id}`;
                let formData = {
                    name: formEditData.name,
                    web_category_id: formEditData.web_category_id,
                    price: formEditData.price,
                    img_url: formEditData.img_url,
                    pc: formEditData.pc,
                    mobile: formEditData.mobile,
                    tag: formEditData.tag
                };
                this.$http.put(url, formData).then(res => {
                    if (res.data.code === PUT_OK) {
                        this.getColumnsData(this.page.currentPage);
                        this.$Notice.success({
                            title: '修改成功'
                        });
                        this.modal_edit_loading = false;
                    }
                    this.$nextTick(() => {
                        this.modal_edit = false;
                        this.modal_edit_loading = true;
                    });
                }).catch();
            },
            pageOnChange (page) {
                this.getColumnsData(page);
                this.page.currentPage = page;
            },
            uploadSuccess1 (res) {
                if (res.code === 1) {
                    this.formItem.img_url = res.image;
                }
            },
            uploadSuccess2 (res) {
                if (res.code === 1) {
                    this.formItem.mobile = res.image;
                }
            },
            uploadSuccess3 (res) {
                if (res.code === 1) {
                    this.formItem_edit.img_url = res.image;
                }
            },
            uploadSuccess4 (res) {
                if (res.code === 1) {
                    this.formItem_edit.mobile = res.image;
                }
            },
            handleSubmit (name) {
                const f = this.formSearch;
                let params = '';
                if (f.name !== '') {
                    params += `search=${f.name}&`;
                }
                if (f.web_category_id !== '') {
                    params += `web_category_id=${f.web_category_id}`;
                }
                this.query = params;
                this.getColumnsData();
            }
        },
        computed: {
            uploadHeaders () {
                let token = Cookies.get('token');
                return {
                    Authorization: token
                };
            }
        }
    };
</script>

<style scoped>

</style>
